<template>
	<view class="index-page">
		<image :src="h5MiniAssets('/index/bg.png')" mode="widthFix" class="bg-image"></image>
		<view class="mask-box" v-if="isShowGZHTip">
			<view class="" style="position: absolute;  right: 18rpx;" :style="{top: `${statusBarHeight + 43}px`}">
				<image :src="h5MiniAssets(pInfo.gif)" mode="widthFix" style="width: 540rpx;height: 607.5rpx;"></image>
				<view @click="isShowGZHTip = false" class=""
					style="position: absolute;width: 90%;bottom: 5%; right: 5%;height: 16%;">

				</view>
			</view>
		</view>
		<view class="content">
			<u-navbar class="header" :is-back="false" z-index="90"
				:background="{backgroundImage:`url(${h5MiniAssets('/index/bg.png')})`, backgroundSize: '100% auto'}">
				<view class="flex items-center status_bar" style="padding: 0 26rpx;position: relative;">
					<image :src="pInfo.logo" mode="heightFix"
						style="height: 58rpx;width: 58rpx;margin-right: 14rpx;"></image>
					<!-- <image src="../../static/images/logo-text.png" mode="heightFix" style="height: 34rpx;"></image> -->
					<text style="font-size: 34rpx;font-weight: bold;line-height: 40rpx;">{{pInfo.name}}</text>

					<view class="flex items-center" style="position: absolute;right: 110px; height: 100%;">
						<view class="" @tap="isShowGZHTip = true" style="border: 1px solid #bdbdbddd;border-radius: 999px;font-size: 28rpx;padding: 8rpx 26rpx;margin-bottom: 4rpx;">
							+小程序
						</view>
					</view>

					<view class="" v-if="isShowTips" style="position: absolute;bottom: -102rpx; right: 18px;">
						<image src="/static/images/index/tips.png" mode="widthFix" style="width: 340rpx;height: 92.2607rpx;">
						</image>
						<view @click="isShowTips = false" class=""
							style="position: absolute;width: 50rpx;bottom: 19rpx; right: 0;height: 50rpx;">
						</view>
					</view>
				</view>
			</u-navbar>

			<view class="" style="font-size: 50rpx;font-weight: bold;padding: 10rpx 26rpx;">
				<text style="color: #232D3E;">资金周转</text>
				<text style="color: #166EFE;">小帮手</text>
			</view>

			<view class="" style="padding: 26rpx;">



				<view class="card-box" :style="{height: isPhoneLogin ? '920rpx' :'708rpx'}">
					<image src="/static/images/index/card-3.png" mode="widthFix" class="bg-image bg-image-3"></image>
					<image src="/static/images/index/card-1.png" mode="widthFix" class="bg-image bg-image-1"></image>
					<image v-if="isPhoneLogin" src="/static/images/index/card-4.png" mode="widthFix" class="bg-image bg-image-2">
					</image>
					<image v-else src="/static/images/index/card-2.png" mode="widthFix" class="bg-image bg-image-2"></image>
					<view class="" style="height: 340rpx;">
						<view style="opacity: 0.6;font-size: 28rpx;padding-top: 38rpx;">最高可申请 (元)</view>

						<view class="flex items-center justify-center">
							<view class="amount" style="margin-top: 18rpx;">
								<text>200,000</text>
								<view class="line">
								</view>
							</view>
						</view>

						<view class="" style="font-size: 25rpx;margin: 20rpx 0;">
							具体额度以资金方审批为准
						</view>
						<view class="" style="opacity: 0.6;font-size: 25rpx;margin-top: 20rpx;">
							年化利率7.2%-24%（单利） 期限3-36个月
						</view>
					</view>

					<template v-if="isPhoneLogin">
						<view class="" style="padding: 60rpx 48rpx 8rpx;text-align: left;color: #222; ">
							<view class="flex items-center justify-between"
								style="border-bottom: 3rpx solid #ECECEC;padding: 30rpx 0;">
								<view class="flex items-center" style="flex:1;width: 200rpx;margin-right: 20rpx;">
									<view class="" style="margin-right: 20rpx;">
										+86
									</view>
									<input maxlength="11" v-model="phone" type="number" style="flex: 1;width: 140rpx;"
										placeholder="请输入手机号" />
								</view>
								<view class="" :style="{color: time>0 ? '#999999' : '#1277FF'}" @click="getCode">
									{{ time >0 ? `${time}s` : '获取验证码' }}
								</view>
							</view>
							<view class="flex items-center justify-between"
								style="border-bottom: 3rpx solid #ECECEC;padding: 30rpx 0;">
								<input type="number" v-model="code" style="width: 100%;" maxlength="6" placeholder="请输入验证码" />
							</view>

							<button style="margin-top: 40rpx;" class="btn-nostyle login-button" @click="phoneLogin">
								立即申请
							</button>

						</view>

					</template>
					<template v-else>
						<view class="flex items-center justify-center">
							<view class="button-tips" style="margin-top: 38rpx;">
								现在申请，快速评估需求
							</view>
						</view>
						<button @click="btnTaphandler" class="btn-nostyle button animation-btn" open-type="getPhoneNumber"
							@getphonenumber="submit">
							立即申请
						</button>
					</template>

					<view class="flex items-center justify-center" style="margin-top: 22rpx;padding: 0 20rpx;">
						<view v-if="!isAgree" @click="isAgree = true" class=""
							style="display: flex;justify-content: center; align-items: center;margin-right: 6rpx;margin-top: 2px;">
							<uni-icons type="circle" size="36rpx" color="#1277FF"></uni-icons>
						</view>
						<view v-else class="" @click="isAgree = false"
							style="display: flex;justify-content: center; align-items: center;color: #1277FF; margin-right: 6rpx;margin-top: 2px;">
							<uni-icons type="checkbox" size="36rpx" color="#1277FF"></uni-icons>
						</view>
						<text style=" font-size: 26rpx; color: #666;text-align: center;"><text
								@click="isAgree = true">我已同意并阅读</text><text @click="useProtocolLink().toPrivacyPolicy()"
								style="color: #1277FF;">《隐私政策》</text> <text @click="useProtocolLink().toUserServicesAgreement()"
								style="color: #1277FF;">《用户服务协议》</text></text>
					</view>


					<view class="card-bottom flex items-center justify-between">
						<text>01. 提交申请</text>
						<text style="margin: 0 10rpx;">></text>
						<text>02. 需求评估</text>
						<text style="margin: 0 10rpx;">></text>
						<text>03. 签约办理</text>
					</view>
				</view>

				<view class="" style="background-color: #FFFFFF;border-radius: 24rpx; padding: 26rpx;margin-top: 28rpx;">
					<view class="flex items-center justify-center">
						<image src="/static/images/index/title.png" mode="widthFix"
							style="width: 200rpx;height: 56.8422rpx;margin: 20rpx 0;"></image>
					</view>
					<image src="/static/images/index/image2.png" mode="widthFix"
						style="width: 100%;height: calc((100vw - 104rpx) * 0.23241); margin: auto; margin-top: 10rpx;"></image>
					<image src="/static/images/index/image3.png" mode="widthFix"
						style="width: 100%;height: calc((100vw - 104rpx) * 0.23241);margin: auto; margin-top: 14rpx;"></image>
					<image src="/static/images/index/image4.png" mode="widthFix"
						style="width: 100%;height: calc((100vw - 104rpx) * 0.23241);margin: auto; margin-top: 14rpx;"></image>
				</view>


				<view class="" style="margin-top: 40rpx;">
					<view class="flex items-center justify-center">
						<image src="/static/images/index/text-left.png" mode="widthFix" style="width: 50rpx;height: 21.73910rpx;">
						</image>
						<text
							style="color: #061C34;text-align: center;font-weight: bold;font-size: 28rpx;margin: 0 20rpx;">{{pInfo.platName}}</text>
						<image src="/static/images/index/text-right.png" mode="widthFix" style="width: 50rpx;height: 21.73910rpx;">
						</image>
					</view>
					<view class="" style="color: #B2B6BB;text-align: center; font-size: 26rpx;">
						<view class="" style="margin-top: 14rpx;">
							{{pInfo.tips}}
						</view>
						<view class="" style="margin-top: 14rpx;">
							理性借贷，避免逾期</view>
						<view class="">
							合理安排资金，珍惜个人信用
						</view>
						<view class="" style="margin-top: 14rpx;">
							{{ pInfo.copyright }}
						</view>
						<view class="">
							{{ pInfo.icp }}
						</view>
						<view class="">
							{{ appVersion || '25.3.15' }}
						</view>
					</view>

				</view>


				<view class="" style="height: 200rpx;">

				</view>

				<view class="gzhxfc" @click="gzgzhHandler" v-if="gzhPageJumpInfo && !isgzhPageJumpInfoClose">
					<view class="flex items-center flex-1" style="width: 100rpx;">
						<view class="gzhlogo" :style="{backgroundImage: `url(${gzhPageJumpInfo.gzhLogo})`}">

						</view>
						<view class="">
							<view class="items-center" style="font-size: 34rpx; font-weight: bold;display: flex;">
								<view class="" style="margin-right: 8rpx;">
									借钱额度审核通知
								</view>
								<view
									style="font-size: 26rpx;font-weight: 400; border: 2rpx solid #fff;opacity: 0.7; border-radius: 12rpx; padding: 6rpx 10rpx; line-height: 1;">
									公众号
								</view>
							</view>
							<view class="" style="font-size: 26rpx;margin-top: 8rpx;opacity: 0.7;">
								关注公众号了解额度调整最新动态
							</view>
						</view>

					</view>
					<view class="" style="background-color: #4F87F9;color: #fff; padding: 10rpx 48rpx; border-radius: 99999rpx;">
						关注
					</view>

					<view class="close" @click.stop="isgzhPageJumpInfoClose = true">
						<image src="../../static/images/close-white.png" mode="widthFix" style="width: 40rpx; height: 40rpx;">
						</image>
					</view>

				</view>

			</view>

			<uni-popup ref="popup" type="bottom" :is-mask-click="false" background-color="#fff"
				border-radius="42rpx 42rpx 0 0">
				<Login @close="$refs.popup.close()" />
			</uni-popup>

		</view>

	</view>
</template>

<script>
	import {
		loginApi,
		sendSmsCodeApi
	} from '../../api/user'
	import {
		gzhPageJumpInfoApi
	} from '../../api/config'
	import {
		h5Url,
		h5MiniAssets,
		productInfo
	} from '../../configs/env.config'
	import {
		useProtocolLink
	} from '../../configs/protocol_link'
	import {
		getChannelCode
	} from '../../utils/request'
	import Login from './components/login.vue'


	export default {
		components: {
			Login
		},
		data() {
			return {
				title: 'Hello',
				isAgree: false,
				appVersion: '',
				gzhPageJumpInfo: undefined,
				isgzhPageJumpInfoClose: false,
				isPhoneLogin: false,
				phone: '',
				code: '',
				time: 0,
				interval: 0,
				isShowTips: true,
				statusBarHeight: 48,
				isShowGZHTip: false
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.systemInfo = systemInfo.statusBarHeight;
			this.initData()
			setTimeout(() => {
				this.isShowTips = false
			}, 5000)
		},
		computed: {
			pInfo(){
				return productInfo
			}
		},
		methods: {
			h5MiniAssets,
			useProtocolLink,
			// 协议是否同意改变事件
			argementChange(val) {
				this.ischeckArg = !!(val.detail.value[0]);
			},
			async initData() {
				const res = await uni.getSystemInfo()
				const appVersion = res.appVersion
				// #ifdef MP-WEIXIN
				const {
					miniProgram
				} = wx.getAccountInfoSync()
				this.appVersion = miniProgram.version || appVersion
				// #endif
				if (!this.appVersion) this.appVersion = appVersion

				this.initConfigData()


				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function (res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	},
				// 	fail: function (res) {
				// 		console.log('当前位置失败：',res);
				// 	}
				// });

			},
			async phoneLogin() {
				if (!this.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				}
				if (!this.code) {
					return uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}

				if (!this.isAgree) {
					return uni.showToast({
						title: '请先同意协议',
						icon: 'none'
					})
				}

				const channelCode = await getChannelCode()
				uni.showLoading()
				const res = await loginApi({
					loginType: 0,
					mobile: this.phone,
					loginCode: this.code
				}).catch(e => {
					console.log()
					return uni.showToast({
						title: e.message || '请求错误',
						icon: 'none'
					})
					return Promise.reject(e)
				}).finally(() => {
					uni.hideLoading()
				})
				const token = res.data.token
				const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}&token=${token}&pn=${this.pInfo.pName}`

				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
				})

				this.$emit('close')

			},
			async getCode() {
				if (this.time > 0) return;
				if (!this.phone) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				}
				uni.showLoading()
				await sendSmsCodeApi({
					oType: 0,
					mobile: this.phone,
				})
				uni.hideLoading()
				this.time = 60
				this.interval = setInterval(() => {
					if (--this.time <= 0) clearInterval(this.interval)
				}, 1000)
			},
			async submit(e) {
				uni.hideLoading()
				console.log(e)
				console.log(e.detail.code) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno) // 错误码（失败时返回）

				const channelCode = await getChannelCode()

				if (e.type !== 'getphonenumber') return;
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					console.log('用户拒绝了')
					this.isPhoneLogin = true
					// const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}`

					// uni.navigateTo({
					// 	url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
					// })
					// this.$emit('close')
					return;
				}

				const mobileCode = e.detail.code;


				uni.showLoading()

				const loginCode = await this.loginCodeGet()

				// console.log({
				// 	loginType: 8,
				// 	mobile: mobileCode,
				// 	loginCode: loginCode
				// })
				// return;

				const res = await loginApi({
					loginType: 8,
					mobile: mobileCode,
					loginCode: loginCode
				})
				const token = res.data.token
				const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}&token=${token}&pn=${this.pInfo.pName}`
				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
				})
				uni.hideLoading()
				console.log(res)
			},
			loginCodeGet() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {
							resolve(loginRes.code)
						},
						fail: reject
					})
				})
			},
			btnTaphandler() {
				this.isAgree = true
				uni.showLoading()
			},
			async initConfigData() {
				const res = await gzhPageJumpInfoApi()
				this.gzhPageJumpInfo = res.data
			},
			gzgzhHandler() {
				uni.navigateTo({
					url: `/pages/gzh/gzh`
				})
			},
			login() {
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style lang="scss">
	.mask-box {
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;

	}

	.gzhxfc {
		position: fixed;
		width: 90%;
		left: 5%;
		box-sizing: border-box;
		bottom: 60rpx;
		background-color: #464748;
		display: flex;
		color: #fff;
		align-items: center;
		padding: 30rpx 30rpx;
		border-radius: 16rpx;
		z-index: 10;
		box-shadow: 0px 10px 15px -3px rgba(125, 125, 125, .4);

		.gzhlogo {
			width: 70rpx;
			min-width: 70rpx;
			height: 70rpx;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			border-radius: 14rpx;
			margin-right: 18rpx;
		}

		.close {
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			background-color: red;
			border-radius: 9999rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// public
	.rigister-split {
		text {
			color: #2b99ed;
		}
	}

	.apply-term {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.banner2 {
		color: white;
		font-size: 80rpx;
		font-weight: 700;
		text-align: center;
		margin-top: 34rpx;
	}

	.gzhxfc {
		position: fixed;
		width: 94%;
		left: 3%;
		bottom: 60rpx;
		z-index: 10;
	}

	.login-button {
		width: 100%;
		margin: auto;
		background-color: #1277FF;
		color: #fff;
		border-radius: 999999px;
		padding: 26rpx;
		font-size: 36rpx;
		font-weight: 500;
	}

	.header {
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.index-page {
		position: relative;
		background-color: #EAEDF0;
		min-height: 100vh;

		.bg-image {
			position: absolute;
			z-index: 0;
			width: 100%;
		}

		.content {
			position: relative;
			z-index: 1;
		}


		.card-box {
			text-align: center;
			color: #fff;
			position: relative;
			z-index: 1;

			.bg-image-3 {
				left: 0;
				top: 70rpx;
				z-index: -1;
			}

			.bg-image-1 {
				left: 5%;
				top: 0rpx;
				z-index: -1;
				width: 90%;
			}

			.bg-image-2 {
				left: 0;
				bottom: 0rpx;
				z-index: -1;
			}

			.card-bottom {
				position: absolute;
				bottom: 0;
				left: 4%;
				width: calc(92% - 52rpx);
				background-color: #F4F6F9;
				color: #999999;
				font-size: 26rpx;
				padding: 12rpx 28rpx;
				border-radius: 18rpx 18rpx 0 0;
			}
		}

		.amount {
			font-size: 90rpx;
			font-weight: bold;

			position: relative;
		}

		.line {
			position: absolute;
			bottom: 0.15em;
			left: 0;
			width: 100%;
			height: 20%;
			background-color: rgba(255, 255, 255, 0.2);
		}

		.button-tips {
			padding: 14rpx 26rpx;
			color: #FB6C28;
			font-size: 28rpx;
			border-radius: 14rpx 14rpx 0 0;
			background: rgba(251, 108, 40, 0.10);
			border-top: 3rpx solid rgba(251, 108, 40, 0.20);
			border-left: 3rpx solid rgba(251, 108, 40, 0.20);
			border-right: 3rpx solid rgba(251, 108, 40, 0.20);
		}

		.button {
			width: 80%;
			margin: auto;
			background-color: #1277FF;
			color: #fff;
			border-radius: 999999px;
			padding: 26rpx;
			font-size: 36rpx;
			font-weight: 500;
		}

	}
</style>